<template>
  <div>
    <h3>{{ selected === -1 ? "添加" : "编辑" }}</h3>
    <form>
      <div style="display: flex; margin-bottom: 20px">
        <div>
          <label for="title">标题：</label>
          <input type="text" id="title" v-model="form.title" />
        </div>
        <div>
          <label for="date">日期：</label>
          <input type="date" id="date" v-model="form.date" />
        </div>
      </div>
    </form>
    <button @click="onSubmit" style="display: block; margin-bottom: 20px">
      提交
    </button>
    <button
      @click="
        selected = -1;
        form.title = '';
        form.date = '';
      "
      style="display: block; margin-bottom: 20px"
    >
      添加
    </button>
    <button @click="mock" style="display: block; margin-bottom: 20px">
      添加模拟数据
    </button>
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody style="display: block; height: 300px; overflow-y: auto" @scroll="onScroll">
        <div class="scroll" :style="{ height: arr.length * 30 + 'px' }">
          <div
            class="placeholder"
            :style="{ height: currentIndex * 30 + 'px' }"
          ></div>
          <tr v-for="(item, index) in displayArr" :key="item.id" style="height:30px">
            <td>{{ item.title }}</td>
            <td>{{ item.date }}</td>
            <td>
              <button @click="onEdit(index, item.title, item.date)">
                修改
              </button>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </div>
      </tbody>
    </table>
  </div>
</template>

<script>
const arr = JSON.parse(localStorage.getItem("arr") || "[]");
export default {
  data() {
    return {
      arr,
      form: {
        title: "",
        date: "",
      },
      selected: -1,
      currentIndex: 0,
    };
  },
  watch: {
    arr: {
      handler() {
        localStorage.setItem("arr", JSON.stringify(this.arr));
      },
      deep: true,
    },
  },
  computed:{
    displayArr(){
      return this.arr.slice(this.currentIndex, this.currentIndex + 10)
    }

  },
  methods: {
    onSubmit() {
      if (this.selected === -1) {
        if (this.form.title === "" || this.form.date === "") {
          alert("请填写完整");
          return;
        }
        // 添加
        this.arr.push({
          ...this.form,
          id: Date.now() + Math.floor(Math.random() * 1000),
        });
      } else {
        if (this.form.title === "" || this.form.date === "") {
          alert("请填写完整");
          return;
        }
        // 修改
        this.arr[this.selected] = { ...this.arr[this.selected], ...this.form };
      }
      this.form = {
        title: "",
        date: "",
      };
      this.selected = -1;
    },
    onEdit(index, title, date) {
      this.selected = index;
      this.form = {
        title,
        date,
      };
    },
    del(index) {
      this.arr.splice(index, 1);
    },
    mock(){
      for(let i = 0; i < 100; i++){
        this.arr.push({
          title: '标题' + i,
          date: '2021-01-01',
          id:i + '',
        })
      }
    },
    onScroll(e){
      const scrollTop = e.target.scrollTop;
      this.currentIndex = Math.floor(scrollTop / 30);  
      console.log(this.currentIndex);
    }
  },
};
</script>
